<script setup>
import { onMounted, ref } from "vue";
import * as Cesium from "cesium";
// 天地图服务配置
const TIAN_MAP_KEY = "71880a6d43abc097e5ce196d93164af1"; // 替换为真实密钥
const VECTOR_URL = `https://t{s}.tianditu.gov.cn/img_c/wmts?tk=${TIAN_MAP_KEY}`;
const ANNOTATION_URL = `https://t{s}.tianditu.gov.cn/cva_c/wmts?tk=${TIAN_MAP_KEY}`;
//经纬度投影的URL img_w 和 cva_w  墨卡托投影应为 img_c 和 cva_c
const viewerRef = ref(null);
const modelEntityRef = ref(null);
onMounted(() => {
  // 初始化 Cesium Viewer
  const viewer = new Cesium.Viewer("cesium-container", {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    // ===== 核心隐藏配置 =====
    animation: false, // 隐藏动画控件
    timeline: false, // 隐藏时间轴
    fullscreenButton: false, // 隐藏全屏按钮
    vrButton: false, // 隐藏VR按钮
    homeButton: false, // 隐藏主页按钮
    geocoder: false, // 隐藏搜索框
    sceneModePicker: false, // 隐藏场景模式选择器
    baseLayerPicker: false, // 隐藏底图选择器
    navigationHelpButton: false, // 隐藏导航帮助按钮
    selectionIndicator: false, // 隐藏选择指示器
    infoBox: false, // 隐藏信息框
    creditsDisplay: false, // 隐藏版权信息（需遵守服务条款）
    imageryProvider: true, // 禁用默认底图
  });
  // 添加矢量底图
  const vectorLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: VECTOR_URL,
    layer: "img",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "w", // 墨卡托投影矩阵集ID
    subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    tilingScheme: new Cesium.WebMercatorTilingScheme(), // 使用墨卡托投影
    tileMatrixLabels: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
    ],
    maximumLevel: 18,
  });
  // 添加矢量注记层
  const annotationLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: ANNOTATION_URL,
    layer: "cva",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "w",
    subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    tilingScheme: new Cesium.WebMercatorTilingScheme(), // 使用墨卡托投影
    tileMatrixLabels: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
    ],
    maximumLevel: 20,
  });
  // 添加图层到场景
  viewer.imageryLayers.addImageryProvider(vectorLayer);
  viewer.imageryLayers.addImageryProvider(annotationLayer);

  // 武汉坐标（中心点：越秀金融中心）
  const wuhanPosition = Cesium.Cartesian3.fromDegrees(
    114.25961, // 经度
    30.59436, // 纬度
    100000 // 视高（单位：米）
  );

  //视角坐标
  const wuhanPosition2 = Cesium.Cartesian3.fromDegrees(
    114.25961, // 经度
    30.56436, // 纬度
    3000 // 视高（单位：米）
  );

  // 加载 GLB 模型
  const modelEntity = viewer.entities.add({
    name: "Wuhan Model",
    position: wuhanPosition,
    model: {
      uri: "/YuexiuGlobalFinancialCenter.glb", // 对应 public 目录路径
      scale: 1.0, // 缩放比例
      minimumPixelSize: 64, // 最小渲染像素（提升远距离可见性）
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
    },
  });

  // 设置相机视角
  viewer.camera.flyTo({
    destination: wuhanPosition2,
    orientation: {
      heading: Cesium.Math.toRadians(0), // 正北方向
      pitch: Cesium.Math.toRadians(-40), // 俯角30度（向下看）
      roll: 0, // 无翻滚
    },
    duration: 2, // 立即跳转（设为2可实现飞行动画）
  });

  viewer.dataSources.add(
    Cesium.GeoJsonDataSource.load("export.geojson", {
      stroke: Cesium.Color.BLUE,
      strokeWidth: 2,
    })
  );

  // 存储引用
  viewerRef.value = viewer;
  modelEntityRef.value = modelEntity;

  // 监听相机变化，动态调整模型
  // viewer.scene.postRender.addEventListener(updateModelScale);

  // 监听鼠标左键点击事件
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction(async (click) => {
    // 拾取点击位置的模型
    const pickedObject = viewer.scene.pick(click.position);
    // if (Cesium.defined(pickedObject)) {
    //   // 如果点击的是模型
    //   const entity = pickedObject.id;
    //   console.log("点击的模型实体：", entity);
    //   // 示例：显示模型位置信息
    //   if (entity instanceof Cesium.Entity) {
    //     //内置方法
    //     viewer.flyTo(pickedObject.id, {
    //       offset: new Cesium.HeadingPitchRange(0, -30, 50),
    //     });
    //   }
    // }
    if (Cesium.defined(pickedObject) && pickedObject.primitive) {
      // 获取模型的 Primitive 对象
      const primitive = pickedObject.primitive;
      if (primitive.ready) {
        // 直接使用 Primitive 的包围球
        const boundingSphere = primitive.boundingSphere;
        viewer.camera.flyToBoundingSphere(boundingSphere, {
          offset: new Cesium.HeadingPitchRange(0, 0, 0),
          duration: 2, // 立即跳转（设为2可实现飞行动画）
        });
      }
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});

// 根据相机距离调整模型缩放
function updateModelScale() {
  const viewer = viewerRef.value;
  const modelEntity = modelEntityRef.value;

  if (!viewer || !modelEntity) return;

  // 获取相机到模型的距离（单位：米）
  const cameraPosition = viewer.camera.position;
  const modelPosition = modelEntity.position.getValue(viewer.clock.currentTime);

  const distance = Cesium.Cartesian3.distance(cameraPosition, modelPosition);

  // 动态计算缩放比例（公式可根据需求调整）
  const minScale = 0.5; // 最小缩放
  const maxScale = 5.0; // 最大缩放
  const scale = Cesium.Math.lerp(
    maxScale,
    minScale,
    Cesium.Math.clamp(distance / 3000, 0, 1) // 距离5000米时开始缩小
  );

  // 更新模型缩放
  modelEntity.model.scale = scale;
}
</script>

<template>
  <div id="cesium-container"></div>
</template>

<style scoped>
#cesium-wrapper {
  position: absolute; /* 或 fixed */
  top: 0;
  left: 0;
  width: 100vw; /* 视窗宽度 */
  height: 100vh; /* 视窗高度 */
  overflow: hidden; /* 隐藏滚动条 */
  margin: 0;
  padding: 0;
}
</style>